<template>
  <Row @touchmove.prevent overflow: auto >
    <Col span="12">
      <Layout style="background-color: rgb(47, 86, 190)">
        <div style="height: 250px"></div>
        <Carousel autoplay v-model="value" loop dots="none">
          <CarouselItem>
            <div class="demo-carousel" style="text-align: center">
              <img
                src="https://file.iviewui.com/admin-cloud-dist/img/banner-2.45de4da0.png"
                alt=""
              />
            </div>
            <div style="position: relative; top: -30px;color: aliceblue;">
              <div style="font-size: 36px; text-align: center; height: 60px">
                完美的权限管理
              </div>
              <div style="text-align: center;color: aliceblue;">
                提供菜单按钮权限、数据权限，内置强大的 iCRUD 组件
              </div>
            </div>
          </CarouselItem>
          <CarouselItem>
            <div class="demo-carousel" style="text-align: center">
              <img
                src="https://file.iviewui.com/admin-cloud-dist/img/banner-1.e7c59757.png"
                alt=""
              />
            </div>
            <div style="position: relative; top: -30px">
              <div style="font-size: 36px; text-align: center; height: 60px;color: aliceblue;">
                经典的后台管理系统
              </div>
              <div style="text-align: center;color: aliceblue;">
                提供菜单按钮权限、数据权限，内置强大的 iCRUD 组件
              </div>
            </div>
          </CarouselItem>
          <CarouselItem>
            <div class="demo-carousel" style="text-align: center">
              <img
                src="https://file.iviewui.com/admin-cloud-dist/img/banner-3.8fb23f4b.png"
                alt=""
              />
            </div>
            <div style="position: relative; top: -30px">
              <div style="font-size: 36px; text-align: center; height: 60px;color: aliceblue;">
                极致的用户体验
              </div>
              <div style="text-align: center;color: aliceblue;">
                提供菜单按钮权限、数据权限，内置强大的 iCRUD 组件
              </div>
            </div>
          </CarouselItem>
        </Carousel>
        <div class="layout-footer" style="height: 340px"></div>
      </Layout>
    </Col>
    <Col span="12">
      <div class="page-account-container">
        <div class="page-account-logo" style="text-align: center">
          <img
            src="https://file.iviewui.com/admin-cloud-dist/img/logo-small.4a34a883.png"
            style="height: 200px;"
          />
        </div>
        <article class="ivu-typography ivu-text-center ivu-mt">
          <h1 class="ivu-typography">Admin Cloud</h1>
          <div class="ivu-typography">
            基于 Admin Plus、iCRUD 和若依的企业级多租户权限管理开发平台
          </div>
        </article>
        <form
          class="ivu-form ivu-form-label-right page-account-form"
          autocomplete="off"
        ></form>
        <Login @on-submit="handleSubmit">
            <UserName name="username" :value="userInfo.username"/>
            <Password name="password" :value="userInfo.password"/>
            <div class="demo-auto-login">
                <Checkbox v-model="autoLogin" size="large">自动登录</Checkbox>
                <a>忘记密码</a>
            </div>
            <Submit />
        </Login>
        <div
          class="ivu-space ivu-space-horizontal ivu-space-center ivu-mt"
          style="gap: 8px"
        >
          <div class="ivu-space-item">登录其它账号：</div>
          <div class="ivu-space-item">
            <button class="ivu-btn ivu-btn-default ivu-btn-small" type="button">
              <span></span>管理员
            </button>
          </div>
          <div class="ivu-space-item">
            <button class="ivu-btn ivu-btn-default ivu-btn-small" type="button">
              <span>人事</span>
            </button>
          </div>
          <div class="ivu-space-item">
            <button class="ivu-btn ivu-btn-default ivu-btn-small" type="button">
              <span>经理</span>
            </button>
          </div>
          <div class="ivu-space-item">
            <button class="ivu-btn ivu-btn-default ivu-btn-small" type="button">
              <span>老板</span>
            </button>
          </div>
          <div class="ivu-space-item">
            <button class="ivu-btn ivu-btn-default ivu-btn-small" type="button">
              <span>普通用户</span>
            </button>
          </div>
        </div>
      </div>
    </Col>
  </Row>
</template>
<script>
import { login } from "../Api/admin";
export default {
  data() {
    return {
      value: 0,
      autoLogin: true,
      userInfo: {
        username: "",
        password: "",
      },
    };
  },
  created() {
    if (localStorage.userInfo) {
      let userInfo = JSON.parse(localStorage.userInfo);
      if (userInfo.username) {
        this.userInfo = userInfo;
      }
    }
    // console.log(this.$store.state.Admin.adminInfo);
    // this.$store.commit("setAdminInfo", { user: 888 });
  },
  methods: {
    handleSubmit(valid, { username, password }) {
      if (valid) {
        console.log(username, password);
        login({ username, password }).then((res) => {
          console.log(res);
          console.log(1);
          if (res.data.errCode == 0) {
            localStorage.token = res.data.token;
            localStorage.token_outTime = res.data.outTime;
            localStorage.userInfo = JSON.stringify({ username, password });
            this.$store.commit("setAdminInfo", {
              username: res.data.data.username,
              avatarUrl: res.data.data.avatarUrl,
              rolse: res.data.data.rolse,
              tel: res.data.data.tel,
            });
            this.$router.push("/index");
          } else {
            this.$Notice.error({
              title: "账号或者密码错误",
              desc: valid ? "" : "",
            });
          }
        });
      }
    },
  },
};
</script>
<style scoped>
.demo-auto-login a {
  float: right;
}
body {
  overflow: hidden;
}
img {
  overflow-clip-margin: content-box;
  overflow: clip;
}
html {
  font-family: sans-serif;
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
.page-account-container {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 16px 0 0;
  max-width: 420px;
  margin: 0 auto;
}
.ivu-layout-header layout-header {
  height: 30%;
}
.demo-carousel img {
  height: 300px;
}
.layout-base {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  color: white;
  text-align: center;
  overflow: hidden;
}
.dl {
  font-size: 46px;
}
.demo-split {
  height: 200px;
  border: 1px solid #dcdee2;
}
.demo-split-pane {
  padding: 10px;
}
</style>
